import React from "react";
import logo from "./logo.svg";
import c from "./App.module.css";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "./store";
import { timerSetActionCreater } from "./store/common/actionCreater";
import {
  increment,
  decrement,
  incrementByAmount,
} from "./store/reduxTooltik/slices";

function App() {
  const name = useSelector((state: RootState) => {
    return state.base;
  });
  const count = useSelector((state: RootState) => {
    return state.counter;
  });
  const dispatch = useDispatch();

  return (
    <div className={c.App}>
      <header className={c["App-header"]}>
        <img src={logo} className={c.Applogo} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <span
          onClick={() => {
            dispatch(timerSetActionCreater("vue"));
          }}
        >
          {name.name}
        </span>
        <span>{count.value}</span>
        <button
          onClick={() => {
            dispatch(increment());
          }}
        >
          我就是要加
        </button>
        <button
          onClick={() => {
            dispatch(decrement());
          }}
        >
          我就是要减
        </button>
        <button
          onClick={() => {
            dispatch(incrementByAmount(250));
          }}
        >
          我自己设置
        </button>
        <a
          className={c.Applink}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
